<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<uni-nav-bar color="#fff" @clickLeft="back" backgroundColor="transparent"  :border="false" :fixed="true" :statusBar="true">
			<block v-slot:left>
				<uni-icons  type="back" size="25" color="#FFF"></uni-icons>
			</block>
			<view class="navbartitle" v-if="data.publicInfo.state==1">
				等待发货
			</view>
			<view class="navbartitle" v-else-if="data.publicInfo.state==2">
				待收货
			</view>
			<view class="navbartitle" v-else>
				待评价
			</view>
		</uni-nav-bar>
		<view class="content">
			<view class="header" >
				<image src="https://img.fubaozx.cn/static/oldImg/16995007221386.png" mode=""></image>
				<view class="right">
					<view class="info">
						<view class="infos">
							<text class="name">{{data.publicInfo.name}}</text>{{data.publicInfo.mobile}}
						</view>
						<!-- <uni-icons type="right" size="20" color="#333"></uni-icons> -->
					</view>
					<view class="address">
						{{data.publicInfo.province}} {{data.publicInfo.city}} {{data.publicInfo.area}} {{data.publicInfo.detailed}}
					</view>
				</view>
			</view>
			<view class="goodsbox">
				<view class="goods" v-for="(tiem,index) in data.commodityInfo" :key="index">
					<image :src="tiem.goods.img" mode=""></image>
					<view class="right">
						<view class="name">
							{{tiem.goods.name}}
						</view>
						<view class="gg">
							规格：{{tiem.attributes}}
						</view>
						<view class="num">
							<text>数量 : {{tiem.number}}</text>
							<text>￥{{tiem.price}}</text>
						</view>
					</view>
				</view>
				<view class="titlebox">
					<view class="titleboxl">
						商品金额
					</view>
					<view class="titleboxr">
						￥{{data.totalPrice}}
					</view>
				</view>

				<view class="titlebox">
					<view class="titleboxl">
						买家留言：
					</view>
					<view class="uni-input">
						{{data.publicInfo.remarks}}
					</view>
				</view>
				<view class="titlebox titleboxs">
					<view class="titleboxl">
						实付款
					</view>
					<view class="titleboxr">
						￥{{data.totalPrice}}
					</view>
				</view>
			</view>
			<view class="goodsbox" >
				<view class="titleboxss">
					<view class="titleboxsl">
						订单编号：
					</view>
					<view class="titleboxsr">
						{{data.publicInfo.order}}
					</view>
				</view>
				<view class="titleboxss">
					<view class="titleboxsl">
						下单时间：
					</view>
					<view class="titleboxsr">
						<uni-dateformat :date="data.timeStamp"></uni-dateformat>
					</view>
				</view>
				<view class="titleboxss">
					<view class="titleboxsl">
						配送方式：
					</view>
					<view class="titleboxsr">
						 {{data.publicInfo.take==0?'快递':'自提'}}
					</view>
				</view>
			</view>
			<view class="goodsbox"  v-if="data.publicInfo.state>1&&data.publicInfo.take!=1">
				<view class="titleboxss">
					<view class="titleboxsl">
						快递公司：
					</view>
					<view class="titleboxsr">
						{{data.publicInfo.logistics}}
					</view>
				</view>
				<view class="titleboxss">
					<view class="titleboxsl">
						快递单号：
					</view>
					<view class="titleboxsr">
						{{data.publicInfo.waybill}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	let data =reactive({
		order:'',			//订单号
		commodityInfo:'',	//商品信息
		publicInfo:'',		//获取第一条公共信息
		timeStamp:'',		//时间戳
		totalPrice:'',		//总价
	})
	function back(){
		uni.navigateBack()
	}
	onLoad((option)=>{
		data.order = option.order

	})
	onShow(()=>{
		orderDetails()
	})
	// 取消订单
	function orderDetails(){
		proxy.$SHOPrequest({
			url:`business/order/`,
			method:'PUT',
			data:{
				order:data.order
			},
			success:(res)=>{
				if(res.errno==0){
					//商品信息
					data.commodityInfo = res.data
					//获取第一条公共信息
					data.publicInfo = res.data[0]
					// 获取时间戳
					let time = res.data[0].pay_time
					data.timeStamp = new Date(time).getTime()
					// 获取总价
					if(res.data.length>=1){
						let min = res.data
						let values = min.reduce((total, item) => {
							console.log(total)
							return total + item.price*item.number
						},0);
						data.totalPrice = values
					}
				}

			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('https://img.fubaozx.cn/static/oldImg/16995007651968.png');
		background-size: 100% 40vh;
		background-repeat: no-repeat;
		::v-deep .uni-navbar__header-btns-left{
			width: 30px !important;
			padding-top: 10px;
		}
		.navbartitle{
			font-size: 48upx;
			font-weight: bold;
			display: flex;
			align-items: flex-end;
		}
		.decs{
			font-size: 28upx;
			color: #FFF;
			padding-left: 50px;
			margin-top: 10upx;
		}
		.content{
				padding: 30upx;
			.header{
				background-color: #FFF;
				padding: 30upx;
				margin-top: 30upx;
				border-radius: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				image{
					width: 60upx;
					height: 60upx;
				}
				.right{
					width: calc(100% - 100upx);
					color: #333;
					.info{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.infos{
							color: #999;
							font-size: 24upx;
							.name{
								color: #333;
								font-size: 32upx;
								font-weight: bold;
								margin-right: 10upx;
							}
						}
					}
					.address{
						margin-top: 10upx;
						font-size: 28upx;
					}
				}
			}
			.goodsbox{
				padding: 30upx;
				margin-top: 30upx;
				border-radius: 30upx;
				background-color: #fff;
				.goods{
					display: flex;
					margin-bottom: 30upx;
					image{
						width: 200upx;
						height: 200upx;
						border-radius: 30upx;
						margin-right: 30upx;
					}
					.right{
						width: calc(100% - 230upx);
						.name{
							color: #333333;
							font-size: 32upx;
							font-weight: bold;
						}
						.gg{
							color: #999999;
							font-size: 24upx;
							margin: 20upx 0;
						}
						.num{
							color: #999999;
							font-size: 24upx;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
				.titlebox{
					display: flex;
					justify-content: space-between;
					color: #333333;
					margin: 30upx 0;
					.titleboxl{
						font-size: 28upx;
						font-weight: 500;
					}
					.titleboxr{
						font-size: 28upx;
						font-weight: bold;
					}
					.uni-input{
						font-size: 28upx;
						width: calc(100% - 150upx);
					}
				}
				.titleboxs{
					margin-top: 30upx;
					padding-top: 30upx;
					border-top: 1upx solid #f5f5f5;
					.titleboxr{
						font-size: 36upx;
						font-weight: bold;
						color: #FA301B;
					}
				}
				.titleboxss{
					display: flex;
					padding: 20upx 0;
					font-size: 29upx;
					color: #333333;
					.titleboxsl{
						margin-right: 20upx;
					}
				}
				.paylist{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin:20upx 0 ;
					.left{
						display: flex;
						align-items: center;
						image{
							width: 40upx;
							height: 40upx;
							margin-right: 20upx;
						}
					}

				}
			}
		}
		.footer{
			width: calc(100% - 60upx);
			padding: 30upx;
			padding-bottom: 60upx;
			position: fixed;
			background-color: #fff;
			left:0;
			bottom: 0;
			display: flex;
			justify-content: flex-end;
			.left{
				font-size: 24upx;
				color: #666;
				padding: 10upx 30upx;
				border-radius: 30upx;
				border: 1upx solid #666;
			}
			.right{
				font-size: 24upx;
				color: #fff;
				padding: 10upx 40upx;
				border-radius: 30upx;
				background-color: $color1;
				border: 1upx solid $color1;
				margin-left: 20upx;
			}
		}
	}

</style>
